<template>
  <el-aside :width="isCollapse ==true ? '64px': '200px'">
    <el-menu id="el-menu" background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened
      :collapse="isCollapse" :collapse-transition="false" router :default-active='activePath'>
      <!-- toggle收缩按钮 -->
      <div class="toggleButton" @click="toggleCollapse">|||</div>
      <!-- 一级导航 -->
      <el-submenu :index="item.id +''" v-for="item in menuList" :key="item.id">
        <!-- 一级导航主体 -->
        <template slot="title">
          <i :class="iconList[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
        <!-- 二级导航 -->
        <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id"
          @click="saveNavStatus('/'+subItem.path)">
          <i class="el-icon-menu"></i>
          <span>{{subItem.authName}}</span>
        </el-menu-item>

      </el-submenu>

    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      menuList: [],
      iconList: {
        '125': ' iconfont icon-users',
        '103': ' iconfont icon-tijikongjian',
        '101': ' iconfont icon-shangpin',
        '102': ' iconfont icon-danju',
        '145': ' iconfont icon-baobiao',
      },
      isCollapse: false,
      activePath: ''
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      this.$http.get('menus').then(res => {
        if (res.data.meta.status !== 200) return this.$message.error(res.data.meta.msg)
        this.menuList = res.data.data
      })
    },
    //右侧边框是否折叠
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    //保存被点击的index状态
    saveNavStatus(path) {
      window.sessionStorage.setItem('activepath', path)
      this.activePath = window.sessionStorage.getItem('activepath')
    }
  }
}
</script>

<style>
.iconfont {
  margin-right: 10px;
}
#el-menu {
  border-right: none;
}
.toggleButton {
  background-color: #4a5064;
  color: #fff;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.4em;
  cursor: pointer;
}
</style>